<template>
	<div class="animate-positiona">
		<div class="carEditorSubmit">
			<button type="submit" form="formAdd" class="submits">确定</button>
			<form class="none" id="formAdd" @submit.prevent="genderDelete">
				<input type="text" name="channelId" v-model="channelId" >
				<input type="text" name="channelName" v-model="channelName" >
				<input type="text" name="intentionRemark" v-model="customerRemark" >
				<input type="text" name="intentionType" value="00" >
				<input type="text" name="modelList" v-model="modelListComputed" >
				<input type="text" name="customerShopId" v-model="$route.query.params.customerShopId" >
			</form>
		</div>
		<div class="page has-navbar has-tabbar" v-nav="{title: '添加意向', showBackButton: true}">
			<div class="page-content padding-top" style="margin-bottom: 0">
				<div class="car-editor" ref="carEditor">
			<div class="reserve" style="height: 100%; overflow-y: auto;">
				<ul>
					<li>
						<list>
							<item>
								<div class="car-enitor-tr" @click="channelIdFn">
									<div class="car-editor-name">意向来源</div>
									<div class="car-editor-input">
										<input type="text" placeholder="请选择客户来源" v-model="channelName"  readonly="readonly" >
										<input type="text" class="none" v-model="channelId" readonly="readonly" >
									</div>
									<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
								</div>
							</item>
							<item>
								<div class="car-enitor-tr active" @click="barandFn">
									<div class="car-editor-name">车辆选择</div>
									<div class="car-editor-input">
										<input type="text" placeholder="请选择意向车辆"  readonly="readonly" >
									</div>
									<div class="car-editor-right"><i class="ion-ios-arrow-right"></i></div>
								</div>
							</item>
							<item>
								<div class="car-enitor-tr " >
									<div class="car-editor-name">备注</div>
									<div class="car-editor-textarea">
										<textarea v-model="customerRemark" :class="{on:textareaNotice}" name="customerRemark"  placeholder="请输入备注信息"></textarea>
										<span class="span">{{remarkLength}}/50</span>
									</div>
								</div> 
							</item>
						</list>
					</li>

					<li>
						<div class="car-editor-title">
							买车意向
						</div>
						<list>
							<item v-for="(item,index) in modelList"> 
								<div class="car-editor-section">
									<div class="car-editor-section-list">
										<div class="car-editor-section-item" >
											<div class="car-editor-section-img">
												<img :src="imgUrl+item.carImageUrl+'.r_90xh_60'" onerror="javascript:this.src='static/images/default.png';" />
											</div>
											<div class="car-editor-section-txt">
												<h5>{{item.carTitle}}</h5>
												<span>¥{{item.carRetailPrice}}万</span>
											</div>
											<i @click="deleteAdd(index)" class="ion-ios-close-outline delete-add"><span>删除</span></i>
										</div>
									</div>
								</div>
							</item>
						</list>
					</li>
				</ul>
			</div>
		</div>
	</div>
	</div>
	<transition-group enter-active-class="fadeInRight animated" leave-active-class="fadeOutRight animated">
			<modal :paramsIs="paramsIs" v-for="(item,index) in paramsIs" :itemIndex="index" :key="item.emit" />			
		</transition-group>
		<transition enter-active-class="fadeInRight animated" leave-active-class="fadeOutRight animated">
			<keep-alive>
				<barand  v-if="barandShow" :brandlist="brandlist" @barandCencal="barandCencal" @dataChange="dataChange" />
			</keep-alive>
		</transition>
	</div>
</template>

<script type="text/javascript">
	import modal from "src/assembly/modalList.vue"
	import {bus} from 'bus.js'
	import barand from "src/assembly/brandSelect.vue"
	export default {
		data(){
			return {
				imgUrl:imgUrl,
				remarkLength:0,
				res:{},
				textareaNotice:false,
				paramsIs:[],
				channelData:[],
				channelId:'',
				channelName:'',
				barandShow:false,
				modelList:[],
				customerRemark:'',
				brandlist:false,
			}
		},
		methods:{
			deleteAdd(ind){
				this.modelList.splice(ind,1)
			},
			genderDelete(event){
				if(this.modelList.length==0){
					$toast.show('请选择意向车辆')
					return
				}
				var formData = new FormData(event.target);
				window.axios.post(baseUrl+'/crm-web/controller/customer/insertIntention',formData).then((res)=>{
					if(res){
						setTimeout(()=>{
							window.$toast.show('添加意向成功',1000)
							setTimeout(()=>{
								this.$router.go(-1)
							},1000)
						},400)
					}
				})
			},
			barandFn(){
				this.barandShow = true
			},
			barandCencal(){
				this.barandShow = false
			},
			busOn(){
				bus.$off('channelId')
				bus.$on('channelId',(index)=>{
					this.channelId = this.paramsIs[0].list[index].id
					this.channelName = this.paramsIs[0].list[index].name
					this.paramsIs = []
				})
			},
			//客户来源
			channelFn(){
				this.paramsIs.push({
					list: this.channelData,
					title: '客户来源',
					emit: 'channelId',
				})
			},
			channelIdFn() {
				if(this.channelData.length==0){
					window.axios.get(baseUrl + '/crm-web/controller/sysParam/channel-list', {params:{marketId:sess.get('userSession').marketId,channelState:1}}).then((res) => {
						for(let item of res.data.result) {
							this.channelData.push({
								name: item.channelName,
								id: item.channelId
							})
						}
						this.channelFn()
					})
				}else{
					this.channelFn()
				}
			},
			dataChange(data){
				let Model = JSON.stringify(this.modelList)
				for(let i of data){
					if(!(Model.indexOf(i.carId)>-1)){
						this.modelList.push(i)
					}
				}
				this.barandShow = false
			}
		},
		mounted(){
			this.modelList = []
			this.customerRemark = ''
			this.channelName = ''
			this.channelId = ''
			this.brandlist = !this.brandlist
		},
		components:{
			modal,
			barand
		},
		computed:{
			modelListComputed(){
				return JSON.stringify(this.modelList)
			}
		},
		watch:{
			'customerRemark':function(){
				if(this.customerRemark){
					this.remarkLength = this.customerRemark.length
					if(this.remarkLength>50)
						this.textareaNotice = true
					else
						this.textareaNotice = false
				}
			}
		},
		created(){
			this.busOn()
		},

	}
</script>
